<!-- 发现的视频页面 -->
<template>
<div class='find-video'>
    <div class="flex flex-wrap flex-sp">
        <div class="communitybox" v-for="value in communityData" :key="value">
            <div class="iconf"><i class="iconfont icon-xiazai1"></i></div>
          <img :src="value.imgfs" alt="" class="imgfs">
          <div class="infos">
            <p>{{ value.title }}</p>
            <div class="flex flex-sp flextop">
                <div class="flex-sp">
                <img :src="value.imgmsg" alt="" class="imgmsg">
                <span>{{value.namef}}</span>
                </div>
                <div class="caller">
                    <i class="iconfont icon-sousuo"></i>
                    <span class="caller">{{value.numf}}</span>
                </div>

            </div>
          </div>
        </div>
      </div>

      <div class="conmmunity-bot">没有更多了</div>


</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import findCommunity from './findCommunity.vue'
export default {
//import引入的组件需要注入到对象中才能使用
components: {
    findCommunity
},
data() {
//这里存放数据
return {
    communityData:[
        {
            id:1,
            imgfs:'https://x.dscmall.cn/storage/uploads/image/9310_s89DXOQyRaIrXh31kopkeCoq80QDpm.png',
            title:'李医生Razer雷蛇 Fire fly烈焰神虫织物版 Chroma幻彩硬质游戏鼠标垫',
            imgmsg:'https://x.dscmall.cn/storage/data/images_user/10665_120.jpg',
            namef:'YANG',
            numf:'1234'
        },
        {
            id:2,
            imgfs:'https://x.dscmall.cn/storage/data/cmt_img/202008/1598835871957969176.jpg',
            title:'李医生Razer雷蛇 Fire fly烈焰神虫织物版 Chroma幻彩硬质游戏鼠标垫',
            imgmsg:'https://x.dscmall.cn/storage/data/images_user/10665_120.jpg',
            namef:'YANG',
            numf:'1234'
        },
        {
            id:3,
            imgfs:'https://x.dscmall.cn/storage/data/cmt_img/202008/1598834847790804021.jpg',
            title:'李医生Razer雷蛇 Firefly烈焰神虫织物版 Chroma幻彩硬质游戏鼠标垫',
            imgmsg:'https://x.dscmall.cn/storage/data/images_user/10665_120.jpg',
            namef:'YANG',
            numf:'1234'
        },
        {
            id:4,
            imgfs:'https://x.dscmall.cn/storage/data/cmt_img/202008/1598833682117565964.jpg',
            title:'李医生Razer雷蛇 Firefly烈焰神虫织物版 Chroma幻彩硬质游戏鼠标垫',
            imgmsg:'https://x.dscmall.cn/storage/data/images_user/10665_120.jpg',
            namef:'YANG',
            numf:'1234'
        },
         {
            id:5,
            imgfs:'https://x.dscmall.cn/storage/uploads/image/9310_s89DXOQyRaIrXh31kopkeCoq80QDpm.png',
            title:'李医生Razer雷蛇 Fire fly烈焰神虫织物版 Chroma幻彩硬质游戏鼠标垫',
            imgmsg:'https://x.dscmall.cn/storage/data/images_user/10665_120.jpg',
            namef:'YANG',
            numf:'1234'
        },
        {
            id:6,
            imgfs:'https://x.dscmall.cn/storage/data/cmt_img/202008/1598835871957969176.jpg',
            title:'李医生Razer雷蛇 Fire fly烈焰神虫织物版 Chroma幻彩硬质游戏鼠标垫',
            imgmsg:'https://x.dscmall.cn/storage/data/images_user/10665_120.jpg',
            namef:'YANG',
            numf:'1234'
        },
        {
            id:7,
            imgfs:'https://x.dscmall.cn/storage/data/cmt_img/202008/1598834847790804021.jpg',
            title:'李医生Razer雷蛇 Firefly烈焰神虫织物版 Chroma幻彩硬质游戏鼠标垫',
            imgmsg:'https://x.dscmall.cn/storage/data/images_user/10665_120.jpg',
            namef:'YANG',
            numf:'1234'
        },
        {
            id:8,
            imgfs:'https://x.dscmall.cn/storage/data/cmt_img/202008/1598833682117565964.jpg',
            title:'李医生Razer雷蛇 Firefly烈焰神虫织物版 Chroma幻彩硬质游戏鼠标垫',
            imgmsg:'https://x.dscmall.cn/storage/data/images_user/10665_120.jpg',
            namef:'YANG',
            numf:'1234'
        },
        {
            id:9,
            imgfs:'https://x.dscmall.cn/storage/data/cmt_img/202008/1598833682117565964.jpg',
            title:'李医生Razer雷蛇 Firefly烈焰神虫织物版 Chroma幻彩硬质游戏鼠标垫',
            imgmsg:'https://x.dscmall.cn/storage/data/images_user/10665_120.jpg',
            namef:'YANG',
            numf:'1234'
        },
    ]

};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {

},
beforeCreate() {}, //生命周期 - 创建之前
//生命周期 - 创建完成（可以访问当前this实例）
created() {

},
beforeMount() {}, //生命周期 - 挂载之前
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {

},
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="less" scoped>
.find-video{
    padding: 0.8rem;
    .communitybox{
        .iconf{
            width: 2rem;
            height: 2rem;
            position: absolute;
            margin: 1.5rem 0 0 1rem;
            border-radius: 50%;
            background: rgba(0,0,0,.5);
            .icon-xiazai1{
                font-size: 1.8rem;
                font-weight: 400;
            }
        }
        .imgfs{
            width: 17.5rem;
            height: 17.7rem;
            border-radius: 1rem 1rem 0 0;
        }
        .infos{
            width: 17.5rem;
            height: 10rem;
            background-color: #fff;
            margin: -0.5rem 0 1rem 0;
            p{
                color: #333;
                width: 15.5rem;
                height: 4rem;
                font-size: 1.5rem;
                // 下面4行是文字溢出隐藏用省略号代替的
                overflow: hidden;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2; //显示两行
                margin-left: 1rem;
            }
            .imgmsg{
                width: 2.2rem;
                height: 2.2rem;
                border-radius: 50%;
            }
            .flextop{
                margin: 1rem;
                span{
                    color: #666;
                }
                .caller{
                    color: #ccc;
                }
            }
        }
    }
    .conmmunity-bot{
        text-align: center;
        color: #888;
        font-size: 1.7rem;
        margin: 1rem 0 5.5rem 0;


    }
}
</style>